<script setup lang="tsx">
import { reactive, ref } from 'vue'
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { BaseButton } from '@/components/Button'
import { Icon } from '@/components/Icon'

const emit = defineEmits(['to-login', 'submit-verification'])

const props = defineProps({
  loginData: {
    type: Object,
    default: () => ({})
  }
})

const Verification = reactive<FormSchema[]>([
  {
    field: 'otherIcon',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return (
            <> 
            <div class="logoImg flex justify-center w-[100%]">
              <img src='/src/assets/login/logo.png' />
              </div>
            </>
          )
        }
      },
    },
  },
  {
    field: 'title',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return <div class="mfa font-bold text-center w-[100%]">MFA认证</div>
        }
      }
    }
  },
  {
    field: 'otherIcon',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return (
            <>
              <div class="safe flex justify-center w-[100%]">
                <img src="/src/assets/login/safe.png" alt="" />
                <span class="text-14px text-center">
                  账号保护已开启，请根据提示完成以下操作
                </span>
              </div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'otherIcon',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return (
            <>
              <div class="flex justify-center w-[100%] photo">
                <img src="/src/assets/login/photo.png" alt="" />
              </div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'title',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return <div class="tip text-center w-[100%]">请打开微信 [東宝令] 小程序，输入6位动态码</div>
        }
      }
    }
  },
  {
    field: 'userRandom',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      placeholder: '输入动态码',
      prefixIcon: <Icon icon="ph:file-text" />
    }
  },
  {
    field: 'login',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return (
            <>
              <div class="loginBtn w-[100%]">
                <BaseButton
                loading={loadings.value}
                  type="primary"
                  class="w-[100%]"
                  onClick={checkIn}
                >
                  进入运营商平台
                </BaseButton>
              </div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'title',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return <div class="w-[100%] text-center text">如果不能提供MFA验证码，请联系管理员!</div>
        }
      }
    }
  }
])

const loadings = ref(false)
const { formRegister, formMethods } = useForm()
const { getFormData, getElFormExpose } = formMethods

const checkIn = async () => {
  const formRef = await getElFormExpose()
  await formRef?.validate(async (isValid) => {
    if (isValid) {
      loadings.value = true
      const formData = await getFormData()
      emit('submit-verification', {
        ...props.loginData,
        ...formData
      })
      loadings.value = false
    }
  })
}

const backToLogin = () => {
  emit('to-login')
}
</script>

<template>
  <Form
    :schema="Verification"
    label-position="top"
    hide-required-asterisk
    size="large"
    class="check-form dark:(border-1 border-[var(--el-border-color)] border-solid)"
    @register="formRegister"
  />
</template>

<style lang="less" scoped>
/* 样式保持不变 */
</style>